<template>
  <el-drawer v-model="isShow" direction="rtl">
    <template #header>
      <h3>分配角色</h3>
    </template>
    <template #default>
      <el-form :model="ckbData">
        <el-form-item label="用户的姓名">
          <el-input v-model="seach" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="角色列表">
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange(checkAll)"
            >全选</el-checkbox
          >
          <el-checkbox-group
            v-model="checkedRoles"
            @change="handleCheckedRoleChange(checkedRoles)">
            <el-checkbox v-for="role in roleNames" :key="role" :label="role">{{
              role
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="demo-drawer__footer">
        <el-button type="primary" :loading="loading" @click="submitDrawer">
          提交</el-button
        >
        <el-button @click="cancel">放弃</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="AssignRole">
  //#region 引入组件
  import { reactive, toRefs, onMounted } from "vue";
  import { storeToRefs } from "pinia";

  import useRoleStore from "@/store/modules/role";
  import useUserStore from "@/store/modules/user";
  import { arrEquation } from "@/utils/tools";
  import { IUserBase } from "@/apis/acl/user/type";
  // import { onUnmounted } from "vue";

  //#endregion

  //#region 状态state
  const roleStore = useRoleStore();
  const userStore = useUserStore();
  const { roleNames, rolePairs } = storeToRefs(roleStore);
  const { loading } = storeToRefs(userStore);
  const state = reactive<{
    ckbData: IUserBase;
    isShow: boolean;
    checkAll: boolean;
    isIndeterminate: boolean;
    checkedRoles: string[];
    seach: string;
  }>({
    ckbData: { name: "" },
    isShow: false,
    checkAll: false,
    isIndeterminate: false,
    checkedRoles: [],
    seach: "",
  });
  const { ckbData, isShow, checkAll, isIndeterminate, checkedRoles, seach } =
    toRefs(state);

  const isOpen = (val: IUserBase) => {
    if (!val.username) return;
    Object.assign(ckbData.value, val);
    checkedRoles.value = ckbData.value.roleNames || [];
    isShow.value = true;
  };

  defineExpose({
    isOpen,
  });

  /** 页面加载完成钩子函数 */
  onMounted(async () => {
    await roleStore.getRoleList();
  });

  //#endregion

  //#region 按钮方法回调

  const submitDrawer = async () => {
    if (!arrEquation(ckbData.value.roleNames!, checkedRoles.value)) {
      const arr = [...checkedRoles.value];
      ckbData.value.roleNames = arr;
      const roleIds = arr.map(i => rolePairs.value[i]);
      ckbData.value.roleIds = roleIds;
      await roleStore.getMaryRoles(roleIds);
      ckbData.value.permissionIds = roleStore.selectPermissionIds;

      await userStore.addOrUpdateUser(ckbData.value);
    }
    isShow.value = false;
  };

  const cancel = () => {
    loading.value = false;
    isShow.value = false;
  };

  const handleCheckedRoleChange = (val: string[]) => {
    const checkedCount = val.length;
    checkAll.value = checkedCount === roleNames.value.length;
    isIndeterminate.value =
      checkedCount > 0 && checkedCount < roleNames.value.length;
  };

  const handleCheckAllChange = (val: boolean) => {
    checkedRoles.value = val ? roleNames.value : [];
    isIndeterminate.value = false;
  };
  //#endregion
</script>

<style scoped lang="scss"></style>
